import React from 'react'
import { Button, Checkbox, Form, Input, Card } from 'antd'
import { SearchOutlined } from '@ant-design/icons'

export default function HospitalSet() {
  const onFinish = (values: any) => {
    console.log('Success:', values)
  }

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo)
     
  }
  return (
    <Card>
      <Form
        layout="inline" // 让表单中的每一个表单元素,水平排列
        //   name="basic"
        //  表示这个表单中,每一个表单项对应的文本,在一行里面占8份(共24份)
        //   labelCol={{ span: 8 }}
        //   表示这个表单中,每一个表单项在一行里面占16份(共24份)
        //   wrapperCol={{ span: 16 }}
        //   initialValues={{ remember: false }} // 设置表单中表单项的默认值
        onFinish={onFinish} // 当点击提交按钮,表单校验通过,则调用
        onFinishFailed={onFinishFailed} // 当点击提交按钮,表单校验不通过,则调用
        //   autoComplete="off"
      >
        <Form.Item
          // label="xxx" // 表单项对应的描述文本
          name="username" //和原生html的name是一致的
          // 表单校验规则
          // rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item
          // label="Password"
          name="password"
          // rules={[{ required: true, message: 'Please input your password!' }]}
        >
          {/* <Input.Password /> 密码框 */}
          <Input placeholder="医院编号" />
        </Form.Item>

        <Form.Item>
          {/* 如果一个Button上,有htmlType="submit"则说明这个按钮是当前表单的提交按钮 */}
          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
            查询
          </Button>
        </Form.Item>
        <Form.Item>
          <Button type="default">清空</Button>
        </Form.Item>
      </Form>
    </Card>
  )
}
